<template>
  <dv-border-box-10
    :style="{ '--right': right + 'px' }"
    backgroundColor="#00003bc1"
    :color="['#4789e3', '#65bfe5']"
    class="right-row-bg"
  >
    <div class="right-row-box">
      <!-- <dv-border-box-12 class="border-box">dv-border-box-13</dv-border-box-12> -->
      <!-- <div class="tolbar">
                <h4 style="text-align: center; margin: 0; font-size: 20px;">实时数据</h4>
            </div> -->
      <div class="content">
        <div class="tools">
          <dv-decoration-7 :dur="2" class="title"
            >&nbsp;<font size="5">关于</font>&nbsp;</dv-decoration-7
          >
          <div class="tool">
            <i class="el-icon-close" @click="removeFn"></i>
          </div>
        </div>
        <div class="box-content">
          <h3>简介</h3>
          <p>
            地震数据可视化平台旨在提供我国境内的地震活动数据，并以可视化方式呈现给用户，帮助更好地理解和分析地震现象。
          </p>

          <h3>数据来源</h3>
          <p>我们的数据来自公开的地震监测机构、科研团队以及其他相关机构。</p>

          <h3>可视化功能</h3>
          <p>
            我们提供多种可视化功能，包括地震热点图、地震分布图、时间序列图等，用户可以根据需求选择合适的方式进行地震数据探索。
          </p>

          <h3>数据分析</h3>
          <p>
            平台还提供基本的数据分析工具，帮助用户进行统计分析、趋势分析、空间分析等，以发现地震活动规律和趋势。
          </p>

          <h3>隐私与安全</h3>
          <p>
            我们高度重视用户隐私和数据安全，并采取各种措施保护用户的个人信息和数据安全。
          </p>

          <h3>联系方式</h3>
          <p>
            如果您有任何问题或意见，请联系我们：<a
              href="mailto:giser_km@outlook.com"
              >giser_km@outlook.com</a
            >
          </p>
          <p style="text-align: center;" class="version">V {{ version }}</p>
        </div>
      </div>
    </div>
  </dv-border-box-10>
</template>

<script>
export default {
  name: "Test1LeftRow",
  data() {
    return {
      right: -500,
      flag: "M5",
      // version
      version: process.env.VUE_APP_VERSION,
    };
  },

  mounted() {},
  computed: {
    getMenuFlag() {
      return this.$store.state.activeMenu;
    },
  },
  watch: {
    getMenuFlag: {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue);
        this.right = -500;
        if (newValue === this.flag) {
          this.right = 0;
        }
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    removeFn() {
      console.log("removeFn");
      this.right = -500;
    },
  },
};
</script>

<style lang="less" scoped>
.right-row-bg {
  position: absolute;
  top: 0;
  right: var(--right);
  bottom: 0;
  width: 20%;
  margin: 5px;
  z-index: 9;
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  animation: run 1s linear;
  color: #1dc1f5;
}

@keyframes run {
  0% {
    left: -100%;
  }

  100% {
    left: 0;
  }
}

.right-row-box {
  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  // color: #4789e3;
  // color: #3f96a5;

  .border-box {
    width: 95%;
    height: 150px;
  }

  // .tolbar {
  //     width: 100%;
  //     height: 5%;
  // }

  .content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
  }
  .box-content{
    text-align: left;
    padding: 5px 10px;
  }
  .box-content:nth-child(1n) {
    flex: 2;
  }

  .box-content:nth-child(2n) {
    flex: 1;
  }
}

.tools {
  // display: flex;
  // flex-direction: row;
  // flex-wrap: nowrap;
  // justify-content: space-around;
  // align-items: center;
  position: relative;
  width: 100%;
  margin-bottom: 5px;

  .title {
    width: 100%;
    height: 30px;
  }

  .tool {
    position: absolute;
    right: 10px;
    top: 5px;
    background: #4687e240;
  }
}

.el-descriptions {
  background-color: transparent !important;
  color: #1dc1f5 !important;
  font-size: 18px;
}

.margin-left {
  margin-left: 10px;
}
</style>
